<template>
    <div class="tartab">
        <div class="tbr-qh">
            <div v-for="(item, index) in url" :key="index"  @click="change(index)" :class="active === index ? 'activeClass' : 'liClass'">
              <img :src="active === index ? imgs[index] : img[index]" alt="">
              <!-- <img :src="imgs[index]" alt=""> -->
             {{ms[index]}}
      </div>
    </div>
    </div>
</template>

<script>
import img1  from '@/assets/img/icon01.png'
import img2  from '@/assets/img/icon02.png'
import img3  from '@/assets/img/icon03.png'
import img4  from '@/assets/img/icon04.png'
import imgs1  from '@/assets/img/icon-act01.png'
import imgs2  from '@/assets/img/icon-act02.png'
import imgs3  from '@/assets/img/icon-act03.png'
import imgs4  from '@/assets/img/icon-act04.png'
export default {
    data() {
        return {
            // 默认选中第一个选项卡
            active: 0,
            // 定义一个地址数组
            url: ["/", "/select", "/shopping","/zc"],
            // 定义一个描述数组
            ms:["首页","校U优选","购物车","我的"],
            // 定义一个未选中图片地址数组
            img:[img1,img2,img3,img4],
            // 定义一个选中图片地址数组
            imgs:[imgs1,imgs2,imgs3,imgs4]
        };
    },
    methods: {
        change(index) {
            this.active = index;
            this.$router.push(this.url[index]);
    },
    },
};
</script>

<style scoped>
.tartab{
    height: 80px;
    background-color: #fff;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
.tbr-qh{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tbr-qh div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    flex: 2.5;
    font-size: 14px;
}
.tbr-qh img{
    width: 30px;
    height: 30px;
    margin-top: 15px;
    margin-bottom: 10px;
}
.activeClass{
    color: #D84B4B;
}
.liClass{
    color: black;
}

</style>
